<template>
  <header>
    <div class="title">
       <router-link class="fa  fa-angle-left back" to="/" tag="span"></router-link>
       <h4>城市选择</h4>
    </div>
    <div class="search">
      <input type="text" ref="searchCity" id="" placeholder="输入城市名或拼音"  v-model="searchCity" >
    </div>
  </header>
</template>

<script>
export default {
  data(){
    return{
      searchCity:"" //搜索城市文本框的值
    }
  },
  watch:{
    searchCity(val){
    //监听文本框的值 发生改变的时候改变store里面的changeCity
    this.$store.commit("changeVal",val)
    // console.log(this.$store.state.changeCity)
    this.$emit("changeCity",val)
    }
  }
}
</script>

<style lang="less" scoped>
header{
  background: #00bcd4;
  height: 80/16rem;
  position: fixed;
  width: 100%;
  .title{
     position: relative;
     padding-top:12/16rem;
    .fa-angle-left{
      color: #fff;
      font-size: 20/16rem;
      position: absolute;
      left: 10/16rem;
      width: 50/16rem
    }
    h4{
      text-align: center;
      color: #fff;
      width: 100%;
    }
  }
  .search{
    padding:10/16rem 10/16rem;
      input{
        outline: none;
        border:none;
        line-height: 30/16rem;
        border-radius: 3/16rem;
        width: 100%;
        text-align: center
      }
    }
 }
 
</style>